import {Plugin, Setting} from "obsidian";
import SelectionReplacePlugin from "./main";

export class RegexDef {
    regexText: string;
    enabled: boolean;
    constructor(regexText: string = "", enabled: boolean = true) {
        this.regexText = regexText;
        this.enabled = enabled;
    }
}

export class CommonUI {
    parent: HTMLElement;
    plugin: SelectionReplacePlugin;
    constructor(parent: HTMLElement, plugin: SelectionReplacePlugin) {
        this.parent = parent;
        this.plugin = plugin;
    }
    arraymove<T>(
        arr: T[],
        fromIndex: number,
        toIndex: number
    ): void {
        if (toIndex < 0 || toIndex === arr.length) {
            return;
        }
        const element = arr[fromIndex];
        arr[fromIndex] = arr[toIndex];
        arr[toIndex] = element;
    }
    display() {
        const {parent} = this;

        parent.createEl("h2", { text: "Define Regex" });
        const desc = document.createDocumentFragment();
        desc.append(
            "Define regex."
        );

        new Setting(parent).setDesc(desc);
        this.plugin.settings.replacePageRegexes.forEach((regexText, index) => {
            const s = new Setting(parent)
                .addText(text => text
                    .setPlaceholder('`(.*)__([0-9a-f]{5,40})(\.\S+)?`')
                    .setValue(this.plugin.settings.replacePageRegexes[index].regexText)
                    .onChange(async (value) => {
                            this.plugin.settings.replacePageRegexes[index].regexText = value;
                            await this.plugin.saveSettings();
                        }
                    ))
                .addExtraButton((cb) => {
                    cb.setIcon("up-chevron-glyph")
                        .setTooltip("Move up")
                        .onClick(() => {
                            this.arraymove(
                                this.plugin.settings.replacePageRegexes,
                                index,
                                index - 1
                            );
                            this.plugin.saveSettings();
                            // Force refresh
                            this.display();
                        });
                })
                .addExtraButton((cb) => {
                    cb.setIcon("down-chevron-glyph")
                        .setTooltip("Move down")
                        .onClick(() => {
                            this.arraymove(
                                this.plugin.settings.replacePageRegexes,
                                index,
                                index + 1
                            );
                            this.plugin.saveSettings();
                            // Force refresh
                            this.display();
                        });
                })
                .addExtraButton((cb) => {
                    cb.setIcon("cross")
                        .setTooltip("Delete")
                        .onClick(() => {
                            this.plugin.settings.replacePageRegexes.splice(
                                index,
                                1
                            );
                            this.plugin.saveSettings();
                            // Force refresh
                            this.display();
                        });
                })
        });
        new Setting(parent).addButton((cb) => {
            cb.setButtonText("Add")
                .setCta()
                .onClick(() => {
                    this.plugin.settings.replacePageRegexes.push(new RegexDef());
                    this.plugin.saveSettings();
                    // Force refresh
                    this.display();
                });
        });

        new Setting(parent)
            .setName('Replace Page Template')
            .setDesc('{{%1}} is replaced by regex match group 1.')
            .setClass('long-description-setting-item')
            .addText(text => text
                .setPlaceholder('e.g. [本地知识库](http://localhost:3000/{{%2}}{{%3}}#~:~hint={{%1}})')
                .setValue(this.plugin.settings.replacePageTemplate)
                .onChange(async (value) => {
                        this.plugin.settings.replacePageTemplate = value;
                        await this.plugin.saveSettings();
                    }
                ));
        new Setting(parent)
            .setName('Replace Page Default Replacements')
            .setDesc('use comma(,) as separator, define the default value if regex match group empty.')
            .addText(text => text
                .setPlaceholder("e.g. '{{%3}}=.html'")
                .setValue(this.plugin.settings.replacePageDefaultReplacements)
                .onChange(async (value) => {
                        this.plugin.settings.replacePageDefaultReplacements = value;
                        await this.plugin.saveSettings();
                    }
                ));
        new Setting(parent)
            .setName('Vault Start Location')
            .setDesc('the root location for vault level replacement.')
            .addText(text => text
                .setPlaceholder("e.g. 0_Workshop/working/obsidian-selection-replace")
                .setValue(this.plugin.settings.vaultReplaceStartLocation)
                .onChange(async (value) => {
                        this.plugin.settings.vaultReplaceStartLocation = value;
                        await this.plugin.saveSettings();
                    }
                ));
    }
}